<!--
* @author wn
* @date 2023/10/09 10:52:56
* @description: 个人中心设置 页
!-->
<template>
	<view class="viewport">
		<!-- 列表1 -->
		<view class="list" icon-right-after v-if="member">
			<navigator
				url="/pagesMember/address/address"
				hover-class="none"
				class="item icon-right-after"
			>
				我的收货地址
			</navigator>
		</view>
		<!-- 列表2 -->
		<view class="list">
			<button
				hover-class="none"
				class="item icon-right-after"
				open-type="openSetting"
			>
				授权管理
			</button>
			<button
				hover-class="none"
				class="item icon-right-after"
				open-type="feedback"
			>
				问题反馈
			</button>
			<button
				hover-class="none"
				class="item icon-right-after"
				open-type="contact"
			>
				联系我们
			</button>
		</view>
		<!-- 列表3 -->
		<view class="list">
			<navigator hover-class="none" class="item icon-right-after" url=" ">
				关于小兔鲜儿
			</navigator>
		</view>
		<!-- 操作按钮 -->
		<view class="button" v-if="member" @tap="onLogout">退出登录</view>
	</view>
</template>
<script lang="ts" setup>
import { useMemberStore } from '@/stores'
import { storeToRefs } from 'pinia'

// 获取会员信息
const memberStore = useMemberStore()
const { member } = storeToRefs(memberStore)

// 退出登录
const onLogout = () => {
	// 模态弹窗
	uni.showModal({
		content: '是否退出登录？',
		confirmColor: '#27BA9B',
		success: ({ confirm }) => {
			if (confirm) {
				// 清理用户信息
				memberStore.clearMember()
				// 返回上一页
				uni.navigateBack()
			}
		},
	})
}
</script>
<style lang="scss">
.viewport {
	padding: 20rpx;
}

/* 列表 */
.list {
	padding: 0 20rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	.item {
		position: relative;
		align-items: center;
		line-height: 90rpx;
		padding-left: 10rpx;
		font-size: 30rpx;
		color: #333;
		border-bottom: 1rpx solid #ddd;
		border-radius: 0;
		text-align: left;
		background-color: #fff;
		&:last-child {
			border: none;
		}
		&::after {
			position: absolute;
			right: 0;
			top: 50%;
			left: auto;
			transform: translateY(-50%);
			width: auto;
			height: auto;
			border: none;
			color: #ccc;
			font-size: 32rpx;
		}
	}
}

/* 操作按钮 */
.button {
	text-align: center;
	line-height: 90rpx;
	margin-top: 40rpx 0 20rpx;
	font-size: 32rpx;
	color: #333;
	background-color: #fff;
	border-radius: 10rpx;
}
</style>
